<template>
  <div id="app">
    <div id="container">

      <test :init="parenttochild" :init2="parenttochild2"></test>

      <button @click="destroyif = !destroyif">显示/隐藏</button>
      <destroy
        @childtoparent="childtoparent"
        :id="destroyid"
        v-if="destroyif"
      ></destroy>
      <hr />
      <child ref="childref" @childchange="datafromchildfun"></child>
      {{ "这就是来自child组件春过来的值：" + datafromchild }}

      <bigchild></bigchild>


      <h1 ref="myh1">我会变颜色</h1>
      <button @click="changecolor">点我让他变色</button>
      <hr>
      <button @click="opchild">使用refs操作child组件</button>
      <hr>

      <button v-if="showinput1" @click="showinput" >展示输入框</button>
      <input type="text" name="" id="" v-else @blur="notshowinput" ref="iptRef">
      <hr>
      <button @click="comoffon='Left'">显示left组件</button>
      <button @click="comoffon='Right'">显示right组件</button>
<keep-alive include="Left">
  <component :is="comoffon"></component>
</keep-alive>
<Content>
  <template v-slot:consolt="{slotdata}"> 
    <p>这就是content组件从父组件拿来的内容</p>
    {{"用户"+slotdata.username+"正在使用插槽"}}
  </template>
</Content>
<hr>
<button @click="changecolor1">自定义指令改变颜色</button>
<p v-color="color">俺是自定义指令，用了我颜色都是红的</p>
<p v-colorall='color'>俺是全局自定义指令</p>
<hr>
<router1></router1>
<hr>
<button @click="changeprovidecolor">点击我改变共享的color数据给child</button>
<div :style="{height:height1,backgroundColor:color2}"></div>
    </div>
  </div>
</template>
<script>
import Content from './components/content.vue'
import child from "./components/child.vue";
import test from "./components/test.vue";
import destroy from "./components/destroy.vue";
import Destroy from "./components/destroy.vue";

import bigChild from "./components/bigchild.vue";
import Bigchild from "./components/bigchild.vue";
import Left from './components/left.vue'
import Right from './components/right.vue'
import router1 from './components/router1.vue'





export default {
  components: { test, Destroy, child, Bigchild,Right,Left,Content, router1},
  data() {
    return {
      showinput1:true,
      viewdata: "",
      parenttochild: "父亲给儿子的数据",
      parenttochild2: "父亲给儿子的数据2",
      color:"blue",
      color2:"red",
      height1:"100px",

      destroyif: true,
      destroyid: "10",
      fromdestroy: "",
      datafromchild: 0,
      comoffon:"Left",
       everysome:['香蕉','苹果','茄子','葡萄','荔枝'],
       everyevery:[{name:'西瓜',state:true,price:40,num:2},{name:"柿子",state:false,price:30,num:4},{name:"葡萄",state:true,price:2,num:12}]
    };
  },
  component: {},
  provide(){
    return{
     globalcolor:{ colors:this.color2}
    }
  },
  methods: {
    changeprovidecolor(){
      this.color2="blue"
    },
    changecolor1(){
 
      var arr=['red','green','blue','grey','purple','white','green','blue','grey','purple','white']
      this.color=arr[parseInt(Math.random()*10)]
      console.log(arr[parseInt(Math.random()*10)])
    },
    showinput(){
      this.showinput1=false
      
      this.$nextTick(function(){
           this.$refs.iptRef.focus()
      })
    },
    notshowinput(){
      this.showinput1=true
    },
  opchild(){
  this.$refs.childref.changefontcolor();
  },
    childtoparent(data) {},
    datafromchildfun(val) {
      this.datafromchild = val;
    },
    changecolor(){
      this.$refs.myh1.style.color="red";

    }
  },
  directives:{
    color:{
      bind(el,binds){
       
        el.style.color=binds.value

      },
      update(el,binds){
 el.style.color=binds.value
      }
    }
  },
  computed: {},
  watch: {},
  component: {
    test,
    destroy,
    child,
    bigChild,
    router1
   
  },
  created(){
    this.everysome.forEach((item,index)=>{
    console.log(item)
    if(item==="茄子"){
      return true
      //必须执行每一项不能停止
    }
     
    })
    this.everysome.some((item,index)=>{
      console.log(item)
      if(item==="茄子"){
        console.log(index)
        return true
        //可以通过固定语法return true停止循环
      }
    })
    var state=this.everyevery.every(item=>item.state)
    console.log("这是every循环的结果"+state)
    //返回的是一个布尔值，有一项不符合就返回false，都符合才是true
    const result=this.everyevery.filter((item)=>item.state==true).reduce((amt,item)=>{return amt+=item.num*item.price},0)
    console.log("这是购物车计算的结果"+result)
    //reduce可以计算数据的结果，用于购物车案例
  }
};
</script>

<style lang="less">
#container {
  height: 2700px;
  width: 800px;
  margin: 50px auto;
  box-shadow: 0 0 8px 8px grey;
  background-color: rgba(0, 0, 0, 0.4);
}
</style>
